<template >
    <div >
        <div>
            <el-row>
                权限名：
                <el-input
                        v-model="queryform.permissionname"
                        placeholder="请输入内容"
                        prefix-icon="el-icon-search"
                >
                </el-input>
            </el-row>
        </div>
        <br>
        <div style="text-align: center">
            <el-row>
                <el-button type="primary" @click="getData()" size="mini" plain>查询</el-button>
                <el-button type="danger" @click="reset()" size="mini" plain>重置</el-button>
            </el-row>
        </div>
        <br>
        <el-button type="primary" @click="addDialogFormVisible = true" size="mini">新增权限</el-button>

        <el-divider></el-divider>

        <el-table
                :data="tableData"
                style="width: 100%">

            <el-table-column
                    prop="permissionname"
                    label="权限名"
                    style="width: 100%">
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="success"
                            @click="handleEdit(scope.row)" icon="el-icon-edit">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.row)" icon="el-icon-delete">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--新增对话框-->
        <el-dialog title="新增权限" :visible.sync="addDialogFormVisible">
            <div slot="default" class="el-dialog--center">
                <el-form :model="addform">
                    <el-form-item label="权限名" :label-width="formLabelWidth">
                        <el-input v-model="addform.permissionname" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addDialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="commitAdd()">确 定</el-button>
            </div>
        </el-dialog>

        <!--编辑对话框-->
        <el-dialog title="编辑权限" :visible.sync="dialogFormVisible">
            <div slot="default" class="el-dialog--center">
                <el-form :model="form">
                    <el-form-item label="权限名" :label-width="formLabelWidth">
                        <el-input v-model="form.permissionname" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="commitEdit()">确 定</el-button>
            </div>
        </el-dialog>
    </div>

</template>

<script>

    export default {
        name: "PermissionView",
        data(){
            return{
                tableData: [],
                addform:{
                    permissionname: null
                },
                queryform:{
                    permissionname: null
                },
                form:{
                    id:null,
                    permissionname: null
                },
                addDialogFormVisible:false,
                dialogFormVisible: false,
                formLabelWidth: '120px'
            }
        },
        //页面加载的时候，会自动调用 created这个方法
        created() {
            this.getData();
        },
        methods: {
            /**
             * 对话框显示该条权限信息
             */
            handleEdit(row) {
                this.form.id = row.id;
                this.form.permissionname = row.permissionname;
                this.dialogFormVisible = true;
            },
            /**
             * 请求后台接口，新增权限信息
             */
            commitAdd(){
                let that = this;
                that.axios.post("http://localhost:9999/project5/ddPermission/addPermission",that.addform).then(function (response) {
                    console.log(response.data);
                    that.getData();
                });
                that.addDialogFormVisible = false;

            },
            /**
             * 请求后台接口，修改权限信息
             */
            commitEdit(){
                let that = this;
                that.axios.post("http://localhost:9999/project5/ddPermission/updateById",that.form).then(function (response) {
                    console.log(response.data);
                    that.getData();
                });
                that.dialogFormVisible = false;
            },
            /**
             * 请求后台接口，根据id删除权限信息
             */
            handleDelete(row) {
                let that = this;
                this.axios.post("http://localhost:9999/project5/ddPermission/deleteById/"+ row.id).then(function (response) {
                    console.log(response.data);
                    that.getData();
                });
            },
            /**
             * 请求后台接口，获取权限列表
             */
            getData(){
                let that = this;
                that.axios.post("http://localhost:9999/project5/ddPermission/listAll",that.queryform).then(function (response) {
                    console.log(response.data);
                    console.log(response.data.data);
                    that.tableData = response.data.data;
                });
            },
            /**
             * 重置查询条件
             */
            reset(){
                this.queryform.permissionname="";
            }
        }
    }
</script>

<style scoped>
    .el-input{
        width: 200px;
    }
    /*.searheader{*/
    /*display: inline-flex;*/
    /*}*/
    .my-input{
        margin-right: 3%;
    }

</style>
